<template>
  <div id="app">
    <greatLayout>
      <great-layout-top>
        <h2 style="color:#fff;margin:0;padding:0;text-align: left;text-indent: 2em;">layout-top</h2>
      </great-layout-top>
      <great-layout-center>
        <great-layout-left>
          <h2>菜单栏</h2>
          <great-menu :menuList="menuList"></great-menu>
        </great-layout-left>
        <great-layout-main>
          <router-view/>
        </great-layout-main>
      </great-layout-center>
      <great-layout-bottom>
        <div>layout-bottom</div>
      </great-layout-bottom>
    </greatLayout>
  </div>
</template>

<script>
  export default {
  name: 'App',
  components: {
  },
  data(){
    return {
      menuList:[]
    }
  },
  mounted() {
    this.menuList = [
      {
        text:'布局示例',
        link:'#/',
        children:[
          {
            text:'layout01',
            link:'#/',
          },
          {
            text:'layout02',
            link:'#/layout02',
            children:[
              {
                text:'layout02-01',
                link:'#/',
              },
              {
                text:'layout02-02 ',
                link:'#/layout02',
              }
            ],
          }
        ]
      },
      {
        text:'base64',
        link:'#/base6401'
      },
      {
        text:'card',
        link:'#/card01'
      },
      {
        text:'modal',
        link:'#/modal01'
      },
      {
        text:'render',
        link:'#/render01'
      },
      {
        text:'render02',
        link:'#/render02'
      },
      {
        text:'表单示例',
        link:'#/form01'
      }
    ];
  }
}
</script>

<style>
  @import "style/great-glob.css";
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
  margin-top: 60px;
}
</style>
